<template>
    <el-dialog
        custom-class="dialogBorder3"
        :visible.sync="show"
        width="480px"
        :before-close="handleClose"
    >
        <div>
            <i
                class="el-icon-warning"
                style="color: #FFA442;font-size: 16px;"
            ></i>
            <span class="infoText">确认要交卷吗吗？</span>
        </div>
        <div class="subInfoText">你还有题目未做完</div>
        <span slot="footer" class="dialog-footer">
            <div @click="dgClose" class="dialogBtn dialogBtn-blue">
                取消
            </div>
            <div @click="dgClose" class="dialogBtn dialogBtn-green">
                确 定
            </div>
        </span>
    </el-dialog>
</template>

<script>
export default {
    components: {},
    props: {},
    data() {
        return {
            show: false
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
    },
    methods: {
        handleClose(done) {
            done();
        },
        dgClose() {
            this.show = false;
        },
        dgShow() {
            this.show = true;
        }
    }
};
</script>

<style lang="scss" scoped>
.dialogBorder3 {
    border-radius: 15px;
}
.dialogBorder3 .el-dialog__body {
    padding: 10px 20px 10px 20px;
}
.infoText {
    font-size: 15px;
    color: #2d3440;
    font-weight: 600;
}
.subInfoText {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 8px;
    margin-left: 15px;
}
/* 弹窗按钮 */
.dialogBtn {
    display: inline-block;
    width: 65px;
    height: 32px;
    line-height: 32px;
    border-radius: 16px;
    text-align: center;
    border: 1px #000000 solid;
    margin-left: 5px;
    font-size: 12px;
    cursor: pointer;
}
.dialogBtn-blue {
    color: #3980ed;
    background: #ffffff;
    border-color: #3980ed;
}
.dialogBtn-green {
    background: #18db60;
    color: #ffffff;
    border-color: #15ca57;
}
</style>
